<!-- 202230163014仇心怡  -->

<!-- 定义文档类型为 HTML5，指示浏览器使用 HTML5 标准解析文档 -->
<!DOCTYPE html>
<!-- 标签是 HTML 文档的根元素，文档的语言是英语 -->
<html lang="en">
	<!-- 开始定义页面头部内容，包括元数据、外部资源链接和脚本 -->
	<head>
		<!-- 设置文档字符编码为 UTF-8，以支持多语言字符（例如中文） -->
		<meta charset="UTF-8" />
		<!-- 设置页面的图标，显示在浏览器标签栏。使用 SVG 格式的图标文件/vite.svg -->
		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
		<!-- 设置视口属性，使页面在移动设备上自适应，页面宽度与设备屏幕宽度一致，初始缩放比例为1 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- 设置网页标题，会显示在浏览器标签上 -->
		<title>全国高校信息查询系统</title>
		<!-- 引入 OpenLayers 库的 JavaScript 文件 (ol.js)。OpenLayers 是一个开源 JavaScript 库，用于构建 Web 地图应用程序 -->
		<script src="./ol.js"></script>
		<!-- 引入 OpenLayers 的 CSS 样式文件 (ol.css)，用于渲染地图相关的样式 -->
		<link rel="stylesheet" href="./ol.css" />
		<!-- 引入 OpenLayers 扩展库的 JavaScript 文件 (ol-ext.js)，这是 OpenLayers 的一个扩展库，提供了更多的地图控件和功能 -->
		<script src="./ol-ext.js"></script>
		<!-- 引入 OpenLayers 扩展库的 CSS 样式文件 (ol-ext.css)，用于渲染扩展控件和其他功能的样式 -->
		<link rel="stylesheet" href="./ol-ext.css" />
	</head>
	<!-- 内联样式，定义了页面的布局和样式 -->
	<style>
		html,
		body,
		#app {
			/* 设置页面元素的外边距和内边距为0，确保元素完全填充浏览器窗口，并且高度和宽度都为100% */
			margin: 0;
			padding: 0;
			height: 100%;
			width: 100%;
		}
	</style>
	<body>
		<!-- 定义一个 id="app" 的 div 元素，这通常是单页面应用（SPA）的挂载点，用于渲染 JavaScript 动态生成的内容（比如地图） -->
		<div id="app"></div>
		<!-- 引入并运行 JavaScript 脚本 /src/main.js。type="module" 表示这是一个 ES6 模块，允许使用 import 和 export 语法 -->
		<script type="module" src="/src/main.js"></script>
	</body>
</html>